<!-- 我的权益 -->
<template>
    <view>
        <uv-sticky customNavHeight="0" bgColor="#f0f0f0">
            <view class="head">
                <swiper previousMargin="40rpx" nextMargin="40rpx" :autoplay="false" class="head-slider" :current="cidx"
                    @change="changeLevel">
                    <swiper-item v-for="x in list" :key="x">
                        <view class="card tn-shadow-md">
                            <view class="card-back tn-gradient-bg__grey"></view>
                            <uv-image v-if="x.cardbg" width="640rpx" height="330rpx" mode="scaleToFill" radius="10rpx"
                                :src="x.cardbg" />
                            <view class="card-body">
                                <!-- 达成状态 -->
                                <view class="card-status">{{ relation.level_code >= x.number ? '已达成' : '未达成' }}</view>
                                <!-- 等级名称 -->
                                <view class="card-level-name">{{ x.name }}</view>
                                <!-- 用户资料 -->
                                <view class="card-user-info flex-1 flex-x flex-align-center">
                                    <uv-avatar size="100rpx" :src="userinfo.headimg" />
                                    <view class="tn-ml-sm">
                                        <view class="tn-text-sm tn-mb-xs ">
                                            <text class="card-user-name">{{ userinfo.nickname }} </text>
                                            <text class="card-user-level" v-if="x.number > 0">VIP{{ x.number }}</text>
                                        </view>
                                        <uv-text v-if="userinfo.phone" format="encrypt" mode="phone" :text="userinfo.phone"
                                            :call="false" />
                                        <uv-text v-else format="encrypt" mode="phone" :text="'未绑定手机号'" />
                                    </view>
                                </view>
                                <!-- 用户特权 -->
                                <view class="card-level-privilege flex-x flex-center">
                                    <template v-for="(xx, ii) in x.prizes" :key="ii">
                                        <view class="card-level-privilege-box" v-if="ii < 3">
                                            <view class="card-level-privilege-title">{{ xx.name }}</view>
                                            <view class="card-level-privilege-value">
                                                <text v-if="xx.type == 0">{{ xx.value }}%</text>
                                                <text v-if="xx.type == 1">￥{{ xx.value }}</text>
                                                <text v-if="xx.type == 2">{{ xx.value }}%</text>
                                                <text v-if="xx.type == 3">{{ xx.value }}%</text>
                                            </view>
                                        </view>
                                    </template>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </uv-sticky>

        <view class="tn-p tn-pb-0" v-if="rule.number > 0">
            <view class="tn-pb-xs tn-pl-xs ta-desc-text">升级{{ rule.name }}</view>
            <view>
                <view class="tn-p tn-white_bg tn-radius tn-mb-sm tn-shadow-md" v-if="rule.enter_vip_status">
                    <view class="flex-x flex-x-between tn-mb">
                        <view>购买入会礼包</view>
                        <view>
                            <view v-if="relation.buy_vip_entry" class="tn-green-dark_text tn-text-sm">已达成</view>
                            <view v-else class="tn-text-sm">未达成</view>
                        </view>
                    </view>
                    <uv-line-progress :percentage="100" :showText="true" />
                    <view class="ta-desc-text tn-mt-sm tn-text-sm">只需购买一份入会礼包即可完成该任务~</view>
                </view>

                <view class="tn-p tn-white_bg tn-radius tn-mb-sm tn-shadow-md" v-if="rule.teams_direct_status">
                    <view class="flex-x flex-x-between tn-mb">
                        <view>直属团队人数</view>
                        <view class="flex-x">
                            <template v-if="userinfo.extra.teams_users_direct >= rule.teams_direct_number">
                                <view class="tn-green-dark_text tn-text-sm">已达成</view>
                            </template>
                            <view v-else class="tn-text-sm">未达成</view>
                            <view class="tn-pl-xs tn-text-sm ta-desc-text">
                                ( {{ userinfo.extra.teams_users_direct || 0 }}/{{ rule.teams_direct_number }} 人 )
                            </view>
                        </view>
                    </view>
                    <uv-line-progress :percentage="userinfo.extra.teams_users_direct / rule.teams_direct_number * 100"
                        :showText="true" />
                    <view class="ta-desc-text tn-mt-sm tn-text-sm">可邀请用户注册并购买商品即可增加团队人数~</view>
                </view>

                <view class="tn-p tn-white_bg tn-radius tn-mb-sm tn-shadow-md" v-if="rule.teams_indirect_status">
                    <view class="flex-x flex-x-between tn-mb">
                        <view>间接团队人数</view>
                        <view class="flex-x">
                            <template v-if="userinfo.extra.teams_users_indirect >= rule.teams_indirect_number">
                                <view class="tn-green-dark_text tn-text-sm">已达成</view>
                            </template>
                            <view v-else class="tn-text-sm">未达成</view>
                            <view class="tn-pl-xs tn-text-sm ta-desc-text">
                                ( {{ userinfo.extra.teams_users_indirect || 0 }}/{{ rule.teams_indirect_number }} 人 )
                            </view>
                        </view>
                    </view>
                    <uv-line-progress :percentage="userinfo.extra.teams_users_indirect / rule.teams_indirect_number * 100"
                        :showText="true" />
                    <view class="ta-desc-text tn-mt-sm tn-text-sm">可邀请用户注册并购买商品即可增加团队人数~</view>
                </view>

                <view class="tn-p tn-white_bg tn-radius tn-mb-sm tn-shadow-md" v-if="rule.teams_indirect_status">
                    <view class="flex-x flex-x-between tn-mb">
                        <view>团队总人数</view>
                        <view class="flex-x">
                            <template v-if="userinfo.extra.teams_users_total >= rule.teams_users_number">
                                <view class="tn-green-dark_text tn-text-sm">已达成</view>
                            </template>
                            <view v-else class="tn-text-sm">未达成</view>
                            <view class="tn-pl-xs tn-text-sm ta-desc-text">
                                ( {{ userinfo.extra.teams_users_total || 0 }}/{{ rule.teams_users_number }} 人 )
                            </view>
                        </view>
                    </view>
                    <uv-line-progress :percentage="userinfo.extra.teams_users_total / rule.teams_users_number * 100"
                        :showText="true" />
                    <view class="ta-desc-text tn-mt-sm tn-text-sm">可邀请用户注册并购买商品即可增加团队人数~</view>
                </view>

                <view class="tn-p tn-white_bg tn-radius tn-mb-sm tn-shadow-md" v-if="rule.order_amount_status">
                    <view class="flex-x flex-x-between tn-mb">
                        <view>订单交易金额</view>
                        <view class="flex-x">
                            <template v-if="userinfo.extra.order_amount_total >= rule.order_amount_number">
                                <view class="tn-green-dark_text tn-text-sm">已达成</view>
                            </template>
                            <view v-else class="tn-text-sm">未达成</view>
                            <view class="tn-pl-xs tn-text-sm ta-desc-text">
                                ( {{ Number(userinfo.extra.order_amount_total || 0) }}/{{ Number(rule.order_amount_number)
                                }}
                                元 )
                            </view>
                        </view>
                    </view>
                    <uv-line-progress :percentage="userinfo.extra.order_amount_total / rule.order_amount_number * 100"
                        :showText="true" />
                    <view class="ta-desc-text tn-mt-sm tn-text-sm">
                        累计消费达 {{ Number(rule.order_amount_number) }} 元即可完成该任务~
                    </view>
                </view>
            </view>
        </view>

        <view class="tn-p" v-if="rule.prizes && rule.prizes.length > 0">
            <view class="tn-pb-xs tn-pl-xs ta-desc-text">{{ rule.name }}特权</view>
            <view class="tn-p tn-white_bg tn-radius tn-mb-sm tn-shadow-md" v-for="(xx, ii) in rule.prizes" :key="ii">
                <view>{{ xx.name }}</view>
                <view class="ta-desc-text tn-text-sm tn-mt-sm">{{ xx.desc }}</view>
            </view>
        </view>

    </view>
</template>

<style lang="scss">
@import './upgrade.scss';
</style>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaUseAccount, TaDataUser } from '@/utils'

export default defineComponent({
    setup() {
        return TaUseAccount()
    },
    data() {
        return {
            rule: <any>{},
            list: <any[]>[],
            cidx: <number>0
        }
    },
    onLoad() {
        this.loadData();
    },
    onPullDownRefresh() {
        this.loadData(true)
        setTimeout(() => uni.stopPullDownRefresh(), 1000)
    },
    methods: {
        loadData(force: boolean = false) {
            TaDataUser.levels(force).then((data: any[]) => {
                this.list = data;
                this.list.map((x: any, i: number) => {
                    if (x.number === this.relation.level_code) {
                        this.rule = x;
                        this.cidx = i;
                    }
                })
            })
        },
        changeLevel(e: any) {
            this.rule = this.list[e.detail.current] || {}
        },
    }
})
</script>